<template>
  <div v-show="visible">
    <div class="flex">
      <div class="card-list">
        <div class="text-center margin-bottom">图文列表</div>
        <div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index"
             @click="selectedIndex=index">
          <div class="text-cut-name">{{item.title}}</div>
        </div>
        <div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div>
      </div>
      <el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm"
               label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="封面图" prop="thumbMediaId">
          <el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id">
            <div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div>
          </el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="digest">
          <el-input v-model="articles[selectedIndex].digest" placeholder="摘要"></el-input>
        </el-form-item>
        <el-form-item label="原文地址" prop="contentSourceUrl">
          <el-input v-model="articles[selectedIndex].contentSourceUrl" placeholder="阅读原文链接"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="9">
            <el-form-item label="作者" prop="author">
              <el-input v-model="articles[selectedIndex].author" placeholder="作者"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="显示封面" prop="showCoverPic">
              <el-switch v-model="articles[selectedIndex].showCoverPic==1?true:false"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="允许评论" prop="needOpenComment">
              <el-switch v-model="articles[selectedIndex].needOpenComment?true:false"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="仅粉丝可评论" prop="onlyFansCanComment">
              <el-switch v-model="articles[selectedIndex].onlyFansCanComment?true:false"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="内容" prop="content">
          <tinymce-editor ref="editor" v-model="articles[selectedIndex].content"></tinymce-editor>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-footer">
      <el-button @click="$emit('hide')">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">
        {{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}
      </el-button>
    </div>
    <assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image"
                     @selected="onAssetsSelect"></assets-selector>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { materialNewsUpload, materialArticleUpdate } from "@/api/wx/assets";
  const articleTemplate = {
    templateId: 0,
    title: '',
    content: '',
    author: '',
    showCoverPic: 1,
    contentSourceUrl: '',
    digest: '',
    thumbMediaId: '',
    needOpenComment: 0,
    onlyFansCanComment: 0
  }
  export default {
    components: {
      TinymceEditor: () => import('@/components/tinymce-editor'),
      AssetsSelector: () => import('./assets-selector')
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        assetsSelectorVisible: false,
        mediaId: '',
        selectedIndex: 0,
        articles: [],
        uploading: false,
        dataRule: {
          title: [
            {required: true, message: '标题不能为空', trigger: 'blur'}
          ],
          content: [
            {required: true, message: '内容不能为空', trigger: 'blur'}
          ],
          thumbMediaId: [
            {required: true, message: '封面图media_id不能为空', trigger: 'blur'}
          ],
          contentSourceUrl: [
            {required: true, message: '原文地址不得为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      init(news) {
        if (news && news.mediaId) {
          this.mediaId = news.mediaId
          this.articles = news.content.articles
        } else {
          this.mediaId = ''
          this.articles = [{...articleTemplate}]
        }
      },
      // 表单提交
      dataFormSubmit() {
        if (this.uploading) return
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.mediaId) {// 编辑，只能一次修改一篇
              this.materialArticleUpdate();
            } else { // 新增，全部文章一起保存
              this.materialNewsUpload();
            }
          }
        })
      },
      materialNewsUpload() {
        this.uploading = true
        materialNewsUpload(this.articles).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.$emit("refreshDataList");
          this.$emit('hide')
        }).finally(() => {
          this.uploading = false
        });
      },
      materialArticleUpdate() {
        this.uploading = true
        materialArticleUpdate({
          'mediaId': this.mediaId,
          'index': this.selectedIndex,
          'articles': this.articles[this.selectedIndex]
        }).then(response => {
          this.$modal.msgSuccess("操作成功");
        }).finally(() => {
          this.uploading = false
        });
      },
      addArticle() {
        this.articles.push({...articleTemplate})
        this.selectedIndex = this.articles.length - 1
      },
      onAssetsSelect(assetsInfo) {
        Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId)
        this.assetsSelectorVisible = false
      }
    }
  }
</script>
<style scoped>
  .card-list {
    width: 300px;
    padding-right: 10px;
    border-right: 1px solid #eeeeee;
  }

  .card-item {
    margin-top: 2px;
    padding: 20px 5px;
    border: 1px solid #ddd;
    font-size: 12px;
    line-height: 15px;
  }

  .card-item.selected {
    border: 2px solid #409EFF;
  }

  .text-cut-name {
    display: -webkit-box;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .card-add {
    margin-top: 2px;
    display: block;
    border: 1px dotted #ddd;
    color: #ddd;
    text-align: center;
    font-size: 30px;
    line-height: 50px;
  }

  .dialog-footer {
    margin-top: 20px;
    text-align: right;
  }
</style>
